<template>
  <div class="home">
    <div class="bannerBox">
      <el-carousel class="rowBanner" :autoplay="false" :loop="true">
        <el-carousel-item v-for="item in rowBannerData" :key="item.id">
          <img :src="item.imagePath" alt="">
        </el-carousel-item>
      </el-carousel>
      <el-carousel class="colBanner" direction="vertical" :autoplay="false" :loop="true">
        <el-carousel-item v-for="item in colBannerData" :key="item.id">
          <img :src="colBannerData[0].imagePath" alt="">
          <img :src="colBannerData[0].imagePath" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="list">
      <div class="listNav">
        <h3>热门推荐：</h3>
        <span v-for="(item,idx) in hotList" @click="toHot(idx)" :key="idx" :class="{active: item.isActive}">{{item.title}}</span>
      </div>
      <div class="listCont">
        多个列表项
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner, getHot } from '@/api'

export default {
  name: 'HomeContent',
  components: {
  },
  data() {
    return {
      active:"active",
      rowBannerData:[],
      colBannerData:[],
      hotList: [],
      id: "01"
    }
  },
  activated() {
    console.log("组件被激活")
  },
  deactivated() {
    console.log("组件被失活")
  },
  mounted(){
    console.log("homeContent的挂载完成函数")
    // 挂载之后，立即跳转到二级路由，并传输默认id
    this.$router.push({
      name:"hot",
      params: {
        id: this.id
      }
    }).catch(err=>{})
  },
  watch:{
    $route(to, from){
      if(to.name === "home"){
        this.$router.push({
          name:"hot",
          params: {
            id: this.id
          }
        }).catch(err=>{})
      }
    }
  },
  created() {
    getBanner().then(res=>{
      // console.log(res.data.data);
      this.rowBannerData = res.data.data.slice(0, 2);
      this.colBannerData = res.data.data.slice(2);
    })
    getHot().then(res=>{
      this.hotList = res.data
      this.hotList.forEach(val=>{
        if(val.href.includes(this.id)){
          val.isActive = true;
        }else{
          val.isActive = false;
        }
      })

    })
  },
  methods:{
    toHot(i){
      this.$router.push(this.hotList[i].href).catch(err=>{});
      this.hotList.forEach((val)=>{
        val.isActive = false;
      })
      this.hotList[i].isActive = true;
    }
  }
}
</script>

<style lang="less">
.home{
  .bannerBox{
    display: flex;
    .rowBanner{
      width:600px;
    }
    .colBanner{
      width:300px;
    }
    img{
      width:100%;
    }
  }
  .list{
    display: flex;
    .listNav{
      width: 200px;
      display:flex;
      flex-direction: column;
      width:200px;
      margin-right:20px;
      span{
        margin: 4px 0;
        cursor: pointer;
      }
      .active{
        background: #55f;
        color: #fff;
      }
    }
  }
}
</style>